<script setup>
import { MYURL } from '@/utils/express/express.js'
import Vrouter from "@/router"
import { userStore } from '@/stores/user.js'
import { ref } from 'vue'
const tokenInfo = userStore()
const router = Vrouter
const sure_delete = ref(false)
let imgURL = `${MYURL}/public/icon/back_black.png`
const login_out = () => {
    sure_delete.value = true
}

const clear_history = () => {
    tokenInfo.change_token(null)
    sure_delete.value = false
}
</script>

<template>
    <div class="back-ground"></div>
    <div class="get-back-main" ref="get_back_main">
        <img class="back-image" ref="back_image" :src="imgURL" @click="router.go(-1)">
        <div class="title">
            <p>消息</p>
        </div>
    </div>
    <div class="menu-main">
        <div @click="router.push('/changeimformation')" class="menu-single">
            <p>账号资料</p>
            <img class="arrow" src="@/assets/img/getback.png">
        </div>
    </div>
    <div @click="login_out" v-show="tokenInfo.token" class="login-out">
        <p>退出登录</p>
    </div>
    <div v-show="sure_delete" class="sure-delete">
        <div>
            <p>您是否确定退出?</p>
            <div>
                <p @click="sure_delete = false">取消</p>
                <p @click="clear_history">退出</p>
            </div>
        </div>
    </div>
</template>


<style lang="less" scoped>
.sure-delete {
    top: 0;
    left: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.4);

    >div {
        border-radius: 10px;
        width: 70vw;
        height: 13vh;
        background-color: white;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 15%;

        >p {
            text-align: center;
            font-weight: 600;
        }

        >div {
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            padding-top: 10px;
            display: flex;
            justify-content: space-around;

            p {
                font-weight: 600;
            }

            p:nth-child(2) {
                color: var(--bilibili-pink);
            }
        }
    }
}

.back-ground {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #f2f3f5;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

.get-back-main {
    height: 40px;
    position: sticky;
    z-index: 100;

    .back-image {
        width: 20px;
    }
}

.menu-main {
    margin-top: 10px;
    background-color: white;

    .menu-single {
        display: flex;
        padding: 10px 20px;
        align-items: center;

        .arrow {
            margin-left: auto;
            transform: rotate(180deg);
            width: 8px;
        }
    }

}

.login-out {
    margin-top: 20px;
    background-color: white;
    padding: 10px;
    text-align: center;
}
</style>